<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	/*  -- flex弹性布局 -- */

	.flex {
		display: flex;
	}

	.flex_sub {
		flex: 1;
	}

	.flex_twice {
		flex: 2;
	}

	.flex_treble {
		flex: 3;
	}

	.flex_direction {
		flex-direction: column;
	}

	.flex_wrap {
		flex-wrap: wrap;
	}

	.align_start {
		align-items: flex-start;
	}

	.align_end {
		align-items: flex-end;
	}

	.align_center {
		align-items: center;
	}

	.align_stretch {
		align-items: stretch;
	}

	.self_start {
		align-self: flex-start;
	}

	.self_center {
		align-self: center;
	}

	.self_end {
		align-self: flex-end;
	}

	.self_stretch {
		align-self: stretch;
	}

	.align_stretch {
		align-items: stretch;
	}

	.justify_start {
		justify-content: flex-start;
	}

	.justify_end {
		justify-content: flex-end;
	}

	.justify_center {
		justify-content: center;
	}

	.justify_between {
		justify-content: space-between;
	}

	.justify_around {
		justify-content: space-around;
	}

	.absbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.rel,
	.relative {
		position: relative;
	}

	.abs {
		position: absolute;
	}

	.text_cut {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.text_cut2 {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.text_cut3 {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.text_bold {
		font-weight: bold;
	}

	.text_center {
		text-align: center;
	}

	.text_left {
		text-align: left;
	}

	.text_right {
		text-align: right;
	}

	.text_0 {
		color: 000;
	}

	.text_3 {
		color: 333;
	}

	.text_6 {
		color: 666;
	}

	.text_9 {
		color: 999;
	}

	.text_f {
		color: fff;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.clearfix:before,
	.clearfix:after {
		content: " ";
		display: table;
	}

	.clearfix:after {
		clear: both;
	}

	.borderbox {
		box-sizing: border-box;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: none;
		z-index: 9;
	}

	.modal.show {
		display: block;
	}

	.modal-context {
		position: relative;
		width: 100%;
		height: 100%;
	}

	//循环生成常用属性 使用方法： class="margin_1" ==> marign: 1rpx;
	@for $var from 1 through 50 {
		.font_size_#{$var} {
			font-size: #{$var}rpx;
		}

		.margin_#{$var} {
			margin: #{$var}rpx;
		}

		.margin_top_#{$var} {
			margin-top: #{$var}rpx;
		}

		.margin_bottom_#{$var} {
			margin-bottom: #{$var}rpx;
		}

		.margin_left_#{$var} {
			margin-left: #{$var}rpx;
		}

		.margin_right_#{$var} {
			margin-right: #{$var}rpx;
		}

		.padding_#{$var} {
			padding: #{$var}rpx;
		}

		.padding_top_#{$var} {
			padding-top: #{$var}rpx;
		}

		.padding_bottom_#{$var} {
			padding-bottom: #{$var}rpx;
		}

		.padding_left_#{$var} {
			padding-left: #{$var}rpx;
		}

		.padding_right_#{$var} {
			padding-right: #{$var}rpx;
		}
	}

	.line_height_1 {
		line-height: 1;
	}
</style>